// 引入createContext,用于跨组件通信，类似于vue的依赖注入
import React, { Component } from "react";
import { Provider, Consumer } from "./context";

import Child3 from "./Child3";

// const context = createContext();
//       提供者     消费者
// const { Provider, Consumer } = context;
// Provider要套在父组件的外面
// Consumer要写在子组件里面进行接受

// context是具有响应式的

class Child2 extends Component {
  render() {
    return (
      <>
        <div>child2组件</div>
        <Child3 />
      </>
    );
  }
}

class Child1 extends Component {
  render() {
    return (
      <>
        <div>child1组件</div>
        <Consumer>
          {(value) => {
            return <div>{value.num}</div>;
          }}
        </Consumer>
      </>
    );
  }
}

class App extends Component {
  state = {
    num: 3,
  };
  fn = () => {
    this.setState({
      num: 5,
    });
  };
  render() {
    return (
      <Provider value={{ num: this.state.num }}>
        <h2>
          context跨组件通信 - <button onClick={this.fn}>btn</button>
        </h2>
        <Child1 />
        <Child2 />
      </Provider>
    );
  }
}

export default App;
